@extends('admin.base')
@section('main')
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
     <legend>用户管理</legend>
    </fieldset>
 
    <form class="layui-form"  method="post" action="" enctype="multipart/form-data">
    {!! csrf_field() !!}
	  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" class="layui-input">
    </div>
  	</div>

    <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="required" placeholder="请输入密码" class="layui-input">
    </div>
    </div>

    <div class="layui-form-item">
    <label class="layui-form-label">重复密码</label>
    <div class="layui-input-block">
      <input type="password" name="passwords" lay-verify="required|pass" placeholder="请再次输入密码" class="layui-input">
    </div>
    </div>

    <div class="layui-form-item">
    <label class="layui-form-label">昵称</label>
    <div class="layui-input-block">
      <input type="text" name="nick" lay-verify="required|nick" placeholder="请输入昵称" class="layui-input">
    </div>
    </div>

    <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="gender" value="0" title="男" checked="">
      <input type="radio" name="gender" value="1" title="女">
    </div>
    </div>

    <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" class="layui-input">
    </div>
    </div>

    <div class="layui-form-item">
    <label class="layui-form-label">活跃度</label>
    <div class="layui-input-block">
      <input type="number" name="integral"  placeholder="请输入活跃度" class="layui-input" value="0">
    </div>
    </div>

    <div class="layui-form-item">
    <label class="layui-form-label">金钱</label>
    <div class="layui-input-block">
      <input type="number" name="money"  placeholder="请输入活跃度" class="layui-input" value="0">
    </div>
    </div>

    <div class="layui-form-item">
    <label class="layui-form-label">是否是管理员</label>
    <div class="layui-input-block">
      <input type="radio" name="is_admin" value="0" title="普通用户" checked="">
      <input type="radio" name="is_admin" value="1" title="管理员">
    </div>
    </div>

  	<div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div class="layui-input-block">
      <select name="roles">
        @foreach($roleAll as $v)
        <option value="{{$v->id}}">{{$v->name}}</option>
        @endforeach
      </select>
    </div>
  </div>

	<div class="layui-form-item">
	  <div class="layui-upload">
	  <label class="layui-form-label">头像</label>
	  <button type="button" class="layui-btn layui-btn-primary" id="test1">上传图片</button>
	    <img class="layui-upload-img" id="picImg">
	</div>   
	</div>   

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
    </form>

<script>
layui.use(['form', 'layer','element','upload'], function(){
  var form = layui.form
  ,$ = layui.jquery
  ,upload = layui.upload
  ,element = layui.element
  ,layer = layui.layer;

  form.verify({
    nick: function(value){
      if(value.length > 8){
        return '昵称不得少于8个字符啊';
      }
    }
    ,pass: function(value){
      if(value != $('input[name="password"]').val()){
        return '两次密码输入不正确！';
      }
    }
    
  });

  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/upload/'
    ,auto: false
    ,choose: function(obj){
      obj.preview(function(index, file, result){
        $('#picImg').attr('src',result);
        $('#picImg').css({width:'40px',height:'40px'});
      });
    }
  });

});
</script>
@endsection